<!--
 * @Description: 导航栏组件
 * @Author: Gaq
 * @Date: 2022-10-16 17:07:53
 * @LastEditTime: 2022-11-25 14:30:20
 * @LastEditors: Gaq
-->
<script setup>
</script>

<template>
  <div class="box">
    <router-link to="/">
      <div class="item">
        <div id="pic">
          <img src="../static/image/home.png" alt="#" />
        </div>
        <div class="text">首页</div>
      </div>
    </router-link>
    <router-link to="/heritageHome">
      <div class="item">
        <div id="pic">
          <img src="../static/image/cultural.png" alt="#" />
        </div>
        <div class="text">文化<br />遗产</div>
      </div>
    </router-link>
    <router-link to="/products">
      <div class="item">
        <div id="pic">
          <img src="../static/image/products.png" alt="#" />
        </div>
        <div class="text">文创<br />产品</div>
      </div>
    </router-link>
    <router-link to="/community">
      <div class="item">
        <div id="pic">
          <img src="../static/image/community.png" alt="#" />
        </div>
        <div class="text">论坛</div>
      </div>
    </router-link>
    <!-- <router-link to="/login"> -->
    <div class="item" @click="toPersonalCenter">
      <div id="pic">
        <img src="../static/image/user.png" alt="#" />
      </div>
      <div class="text">个人<br />中心</div>
    </div>
    <!-- </router-link> -->
  </div>
</template>

<script setup>
import router from "../router";

const toPersonalCenter = () => {
  const user = JSON.parse(localStorage.getItem("user"));
  if (user != null) {
    if (user.role === "manufacturer") {
      router.push({
        path: "/manuCenter",
      });
    } else if (user.role === "inheritor") {
      router.push({
        path: "/culCenter",
      });
    } else if (user.role === "common") {
      router.push({
        path: "/commonCenter/userInfo",
      });
    }
  } else {
    router.push({
      path: "/login",
    });
  }
};
</script>

<style scoped>
.box {
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: 20px;
  height: 430px;
  position: fixed;
  top: 0;
  bottom: 0;
  margin: auto;
  justify-content: space-evenly;
  transition: width 0.3s;
}

.item {
  height: 80px;
  box-shadow: 2px 2px 10px #ccc;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0.8;
  background-color: rgb(234, 201, 196);
}

#pic img {
  display: none;
  height: 60%;
  width: 60%;
  padding-top: 25%;
  padding-left: 20%;
}

a {
  text-decoration: none;
}

.text {
  width: 80px;
  height: 80px;
  color: rgb(235, 238, 241);
  align-items: center;
  margin-left: 20%;
  font-size: 18px;
  display: none;
}

/*当鼠标放置在item框内时，隐藏图片  */
.item:hover #pic {
  display: none;
}

.item:hover {
  background-color: rgb(162, 74, 64);
}

.item:hover .text {
  display: flex;
}

.box:hover {
  width: 80px;
}

.box:hover #pic img {
  display: block;
}
</style>